import React, { Component,ChangeEvent } from 'react';
import {OptionsProps,VoteProps} from '../../store/reducer/vote.reducer';
import {connect} from 'react-redux';
import {bindActionCreators} from 'redux';
import * as VoteActions from '../../store/actions/votelist';
import {RouteComponentProps} from 'react-router-dom';

interface Iprops extends RouteComponentProps{
    addVote:(target:VoteProps) => void,
    votelist:OptionsProps[]
}

interface Istate{
    title:string,
    desc:string,
    options:OptionsProps[],
    [propsname:string]:any
}

class Create extends Component<Iprops,Istate> {

    state = {
        title:'',
        desc:'',
        options:[]
    }
    render() {
        let {title,desc,options} = this.state;
        return (
            <div>
                <div>
                    标题：<input type="text" value={title} onChange={this.change} name="title"></input>
                </div>
                <div>
                    说明:<input type="text" value={desc} onChange={this.change} name="desc"></input>
                </div>
                <div>
                    <ul>
                        {options.map((item:OptionsProps,index:number) => <li key={item.id}>
                            <span onClick={() => this.del(index)}>删除</span>
                            <input type="text" value={item.text} onChange={(e:ChangeEvent)=> this.changeText(index,e)}/>
                        </li>)}
                    </ul>
                </div>
                <div onClick={this.add}>添加</div>
                <button onClick={this.complate}>完成</button>
            </div>
        );
    }
    //change事件
    change = (e:ChangeEvent)=> {
        this.setState({
            [(e.target as HTMLInputElement).name]:(e.target as HTMLInputElement).value
        })
    }

    //修改选项
    changeText = (index:number,e:ChangeEvent) => {
        let options:OptionsProps[] = this.state.options;
        options[index].text = (e.target as HTMLInputElement).value;
        this.setState({
            options
        })
    }

    //添加事件
    add = () => {
        let options:OptionsProps[] = this.state.options;
        let target:OptionsProps = {
            id:options.length+1,
            text:'',
            num:0
        }
        options = [...options,target];
        this.setState({
            options
        })
    }

    //删除
    del = (index:number) => {
        let options:OptionsProps[] = this.state.options;
        options.splice(index,1);
        this.setState({
            options
        })
    }

    //完成
    complate = () => {
        console.log(this.state);
        let id = this.props.votelist.length+1;
        let {title,desc,options} = this.state;
        let target:VoteProps = {
            id,
            title,
            desc,
            options,
            createUser:localStorage.getItem('name') || '',
            voteusers:[],
            createTime:new Date()+'',
            selected:-1,
            size:0

        }
        /**
         * 
         * id:number,
            title:string,
            desc:string,
            options:OptionsProps[],
            createUser:string,
            voteusers:string[],
            createTime:string,
            selected:number,
            size:number
         */

         this.props.addVote(target);
         this.props.history.push('/main/home')
        
    }
}

const stateMapTopProps = (state:any) => {
    return {
        votelist:state.vote.votelist
    }
}

const dispatchMapToProps = (dispatch:any) => {
    return bindActionCreators(VoteActions,dispatch)
}

export default connect(stateMapTopProps,dispatchMapToProps)(Create);